import { Space, Notification, Tag } from "@douyinfe/semi-ui";
import swr from "../utils/swr";
import Page from "../utils/page";
import { Table, Text, Loading, Card, Grid, Button } from "@nextui-org/react";
import { IconEdit, IconDelete } from "@douyinfe/semi-icons";

export default function Home() {
  const { data, isLoading, isError } = swr(`/teachers`);
  if (
    isLoading ||
    typeof data === "undefined" ||
    typeof data.detail !== "undefined"
  ) {
    return (
      <Page page="/teachers">
        <Loading />
      </Page>
    );
  } else if (isError) {
    return (
      <Page page="/teachers">
        <Text>获取教师信息失败</Text>
      </Page>
    );
  }
  const columns = [
    {
      label: "届次",
      key: "year",
    },
    {
      label: "姓名",
      key: "name",
    },
    {
      label: "性别",
      key: "sex",
    },
    {
      label: "身份证号",
      key: "id_number",
    },
    {
      label: "所带科目",
      key: "subject",
    },
    {
      label: "所带班级",
      key: "class",
    },
    {
      label: "操作",
      key: "operates",
    },
  ];
  const table = {};
  let teachers = 0;
  let key = 1;
  for (let year in data) {
    if (typeof data[year] === "undefined") {
      continue;
    }
    for (let teacher in data[year]) {
      if (typeof data[year][teacher] === "undefined") {
        continue;
      }
      teachers++;
      if (typeof table[teacher] === "undefined") {
        table[teacher] = {
          key: key++,
          year: year,
          sex: data[year][teacher].sex,
          id_number: data[year][teacher].id_number,
          subject: data[year][teacher].subject,
          class: (
            <Space>
              {data[year][teacher].classes ? (
                data[year][teacher].classes.map((subject) => (
                  <Tag size="large" key={subject}>
                    {subject}
                  </Tag>
                ))
              ) : (
                <></>
              )}
            </Space>
          ),
        };
      }
    }
  }
  const rows = [];
  for (let teacher_name in table) {
    rows.push({
      name: teacher_name,
      ...table[teacher_name],
      operates: (
        <Space>
          <IconEdit
            size="large"
            onClick={() => {
              Notification.info({
                content: "功能正在实现中，敬请期待",
              });
            }}
          />
          <IconDelete
            size="large"
            onClick={() => {
              Notification.info({
                content: "功能正在实现中，敬请期待",
              });
            }}
          />
        </Space>
      ),
    });
  }

  return (
    <Page page="/teachers">
      <div
        style={{
          margin: "1rem",
        }}
      >
        <Card css={{ marginBottom: 15 }}>
          <Grid.Container gap={2} alignItems="baseline">
            <Grid>
              <Text>教师总人数：{teachers}</Text>
            </Grid>
            <Grid>
              <Button
                auto
                onClick={() => {
                  Notification.info({
                    content: "功能正在实现中，敬请期待",
                  });
                }}
              >
                添加教师
              </Button>
            </Grid>
          </Grid.Container>
        </Card>
        <Table
          aria-label="考试列表"
          css={{
            height: "auto",
            minWidth: "100%",
          }}
        >
          <Table.Header columns={columns}>
            {(column) => (
              <Table.Column key={column.key}>{column.label}</Table.Column>
            )}
          </Table.Header>
          <Table.Body items={rows}>
            {(item) => (
              <Table.Row key={item.key}>
                {(columnKey) => <Table.Cell>{item[columnKey]}</Table.Cell>}
              </Table.Row>
            )}
          </Table.Body>
        </Table>
      </div>
    </Page>
  );
}
